<!--
 * @Author: boyyang
 * @Date: 2022-01-02 00:15:28
 * @LastEditTime: 2022-02-19 23:57:12
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\home\index.vue
-->

<template>
    <div class="home">
        <!-- <home-background :url="bgImg" :type="type"></home-background> -->
        <background :url="bgImg" :is-video="type == 'image' ? false : true">
            <home-menu
                @headerClick="headerClick"
                @imgUpload="imgUpload"
                @settingClick="settingClick"
            ></home-menu>
            <modal-box v-model:is-show="isShow"></modal-box>
            <setting v-model:is-show="isShowSetting" @reflesh="reflesh" :url="bgImg" :type="type"></setting>
            <images-upload
                @file-change="fileChange"
                v-model:is-show="isShowImgUp"
                :url="tempFileURL"
            ></images-upload>
            <div class="time">
                <div class="time-wrapper">
                    <now-time background-color="rgba(0, 0, 0, 0)"></now-time>
                </div>
            </div>
        </background>
    </div>
</template>

<script lang="ts" setup>
import homeMenu from './components/homeMenu.vue'
import { IUploadRes } from '@/components/customUpload/index.vue'
import { userMes, findDataByOpenId } from '@/cloudbase/index'
import { useUserStore } from '@/store/modules/user'
import { upload } from '@/cloudbase/db'
import { useMessage } from '@/components/message'
import { useLoading } from '@/components/fullScreenLoading'

const userStore = useUserStore()
const userInfo = userMes()
const message = useMessage()
const loading = useLoading()

userStore.setUserInfo(userInfo)

// 是否显示modal-box
const isShow = ref<boolean>(false)
// 是否显示 drawer
const isShowSetting = ref<boolean>(false)
//  是否显示图片上传
const isShowImgUp = ref<boolean>(false)
// 
const bgImg = ref<string>()
const type = ref<string>('image')
// 
const tempFileURL = ref<string>('')

// 点击头像
const headerClick = () => {
    isShow.value = true
}

// 点击图片上传
const imgUpload = () => {
    // isDrawerShow.value = true
    isShowImgUp.value = true
}

// 点击设置
const settingClick = () => {
    isShowSetting.value = !isShowSetting.value
}

// 图片上传
const fileChange = async (e: IUploadRes, type: number) => {
    let _type = type === 0 ? 'wallpaper_pc' : type === 1 ? 'wallpaper_mobile' : 'wallpaper_video'
    const msg: string = type === 0 ? '图片上传成功' : type === 1 ? '图片上传成功' : '视频上传成功'
    let files = e.file
    let tempFiles = e.tempUrl
    if ((files as unknown as FileList).length > 1) {
        loading.start()
        let len = (files as unknown as FileList).length
        for (let i = 0; i < len; i++) {
            tempFileURL.value = tempFiles[i]
            let res = await upload((files as unknown as FileList)[i], _type, _type)
            message.success(`${res.name}上传成功！`)
        }
        loading.end()

    } else {
        loading.start()
        tempFileURL.value = e.tempUrl as string
        let file = type == 0 ? (files as unknown as FileList)[0] : type === 1 ? (files as unknown as FileList)[0] : (files as unknown as FileList)
        upload(file, _type, _type)
            .then((res) => {
                message.success(msg)
                loading.end()
            })
            .catch((err) => {
                message.error(err)
                loading.end()
            })
    }


}

const reflesh = () => {
    getBackground()
}

const getBackground = () => {
    findDataByOpenId('users', userInfo?.uid as string).then((res) => {
        bgImg.value = res.data[0] && res.data[0].tempFileURL || userInfo?.avatarUrl
        type.value = res.data[0] && res.data[0].type || 'image'

    })
}

onMounted(() => {
    getBackground()
})

</script>

<style scoped lang="scss">
.home {
    position: relative;
}

.time {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;

    .time-wrapper {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    .time {
        .time-wrapper {
            width: 100%;
        }
    }
}
</style>